import 'package:app_test/const.dart';
import 'package:app_test/home_page.dart';
import 'package:app_test/newsList_page.dart';
import 'package:app_test/pub_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  const MyHome({super.key});

  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {
  static GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  List pages = [HomePage(), NewsListPage()];
  int index = 0;
  bool drawer = true;

  get _homeDrawer {
    return Drawer(
      elevation: 0,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Column(
            children: [
              Container(
                height: 180,
                color: Color(0xFF642475),
              ),
              SingleChildScrollView(
                child: Column(
                  children: [
                    ListTile(
                      onTap: () {
                        setState(() {
                          index = 0;
                          _scaffoldKey.currentState?.openEndDrawer();
                        });
                      },
                      title: Text('Home'),
                    ),
                    Theme(
                      data: Theme.of(context)
                          .copyWith(dividerColor: Colors.transparent),
                      child: ExpansionTile(
                        key: ValueKey('listFirst'),
                        // leading: Icon(Icons.add),
                        // trailing: SizedBox(),
                        onExpansionChanged: (value) {
                          value = !value;
                        },
                        title: const Text('first'),
                        children: const [
                          ListTile(title: Text('One')),
                          ListTile(title: Text('Two')),
                          ListTile(title: Text('Free')),
                          ListTile(title: Text('Four'))
                        ],
                      ),
                    ),
                    Theme(
                      data: Theme.of(context)
                          .copyWith(dividerColor: Colors.transparent),
                      child: ExpansionTile(
                        key: ValueKey('listSecond'),
                        onExpansionChanged: (value) {
                          value = !value;
                        },
                        title: const Text('second'),
                        children: [
                          ListTile(
                            onTap: () {
                              setState(() {
                                index = 1;
                                _scaffoldKey.currentState?.openEndDrawer();
                              });
                            },
                            key: ValueKey('news'),
                            title: Text('One'),
                          ),
                          ListTile(title: Text('Two')),
                          ListTile(title: Text('Free')),
                          ListTile(title: Text('Four'))
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
          Container(
            height: 80,
            color: const Color(0xFF642475),
            child: ListTile(
              key: ValueKey('search'),
              onTap: () {
                drawer = false;
                setState(() {});
              },
              leading: const Icon(
                Icons.search,
                color: Colors.white,
                size: 28,
              ),
              title: const Text('Search Now',
                  style: TextStyle(
                      fontSize: 12,
                      color: Colors.white,
                      fontWeight: FontWeight.w400)),
              subtitle: const Text(
                'Search Now',
                style: TextStyle(fontSize: 18, color: Colors.white),
              ),
            ),
          ),
        ],
      ),
    );
  }

  get _searchDrawer {
    return Drawer(
      backgroundColor: Color(0xFF642475),
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  'Search',
                  style: TextStyle(color: Colors.white),
                ),
                GestureDetector(
                  onTap: () {
                    drawer = true;
                    setState(() {});
                  },
                  child: Icon(
                    Icons.clear,
                    color: Colors.white,
                    size: 16,
                  ),
                )
              ],
            ),
            const SizedBox(
              height: 20,
            ),
            Container(
              height: 45,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              margin: const EdgeInsets.symmetric(vertical: 10),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10), color: Colors.white),
              child: const TextField(
                key: ValueKey('titleField'),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'News Title',
                ),
              ),
            ),
            Container(
              height: 45,
              padding: const EdgeInsets.symmetric(horizontal: 10),
              margin: const EdgeInsets.symmetric(vertical: 10),
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10), color: Colors.white),
              child: const TextField(
                key: ValueKey('nameField'),
                decoration: InputDecoration(
                  border: InputBorder.none,
                  hintText: 'Skill Name',
                ),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 45,
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    margin: const EdgeInsets.symmetric(vertical: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: const TextField(
                      key: ValueKey('startField'),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'Start Date',
                      ),
                    ),
                  ),
                ),
                const SizedBox(
                  width: 20,
                ),
                Expanded(
                  flex: 1,
                  child: Container(
                    height: 45,
                    padding: const EdgeInsets.symmetric(horizontal: 10),
                    margin: const EdgeInsets.symmetric(vertical: 10),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(10),
                        color: Colors.white),
                    child: const TextField(
                      key: ValueKey('endField'),
                      decoration: InputDecoration(
                        border: InputBorder.none,
                        hintText: 'End Date',
                      ),
                    ),
                  ),
                ),
              ],
            ),
            SizedBox(
              height: 30,
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: GestureDetector(
                onTap: () {
                  _scaffoldKey.currentState?.openEndDrawer();
                },
                child: Container(
                  key: ValueKey('searchButton'),
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: Colors.white),
                  child: Icon(Icons.search),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        primary: true,
        appBar: AppBar(
          centerTitle: true,
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text('wordsSkills'),
          // automaticallyImplyLeading: false,
          leading: IconButton(
              key: const ValueKey('drawerButton'),
              onPressed: () {
                if (_scaffoldKey.currentState!.isDrawerOpen) {
                  _scaffoldKey.currentState?.openEndDrawer();
                } else {
                  _scaffoldKey.currentState?.openDrawer();

                  setState(() {
                    drawer = true;
                  });
                }
              },
              icon: Icon(Icons.dehaze_rounded)),
        ),
        body: Scaffold(
          key: _scaffoldKey,
          drawer: drawer ? _homeDrawer : _searchDrawer,
          body: pages[index],
        ));
  }
}
